<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne"  name="sex" value="男"/>男
        <input type="radio" id="sexTwo" checked name="sex" value="女"/>女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br/>
    <table cellspacing="0" border="1" width="600px" >
        <thead>
            <tr>
                <td width="20%">
                    <input type="checkbox" class="selectAll" >全选
                    <input type="checkbox" class="selectOther" >反选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>张三</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td> 
                <td>王八</td>
                <td>男</td>
                <td>45</td>
            </tr>
        </tbody>

    </table>

</body>
</html>
<script>
    // 1、全选功能  勾上 全部选中 取消 全部取消
    document.querySelector('.selectAll').onclick = function(){
        var _this = this;
        document.querySelectorAll('.user').forEach(function(item){
            item.checked = _this.checked;
        })
        // document.querySelectorAll('.user').forEach(item=>item.checked = this.checked)
    }
    // 2、当所有的user 全部选中 全选自动勾上
    document.querySelectorAll('.user').forEach(function(item){
        item.onclick = function(){
            // 如果当前被勾选的user个数与 user个数相同 就证明全选
            // if(document.querySelectorAll('.user').length == document.querySelectorAll('.user:checked').length){
            //     document.querySelector('.selectAll').checked = true;
            // }else{
            //     document.querySelector('.selectAll').checked = false;
            // }
            // 不论怎么写 就是伪checked属性赋值 true或者false 比较长度得到的就是布尔值
            document.querySelector('.selectAll').checked = document.querySelectorAll('.user').length == document.querySelectorAll('.user:checked').length
        }
    })
    // 3、反选
    document.querySelector('.selectOther').onclick = function(){
        document.querySelectorAll('.user').forEach(function(item){
            item.checked = !item.checked;
        })
    }
</script>